<template>
	<view class="wrap">
		<view class="wrap__header">
			<view class="header__uplaod" @click="imgClick('id_card_img_1')">
				<image :src="formData.id_card_img_1" mode="aspectFill" v-if="formData.id_card_img_1" class="upload__img"></image>
				<image src="@/static/imgs/card_face1.png" mode="aspectFill" class="upload__img" v-else></image>
			</view>
			<view class="header__uplaod" @click="imgClick('id_card_img_2')">
				<image :src="formData.id_card_img_2" mode="aspectFill" v-if="formData.id_card_img_2" class="upload__img"></image>
				<image src="@/static/imgs/card_end1.png" mode="aspectFill" class="upload__img" v-else></image>
			</view>
		</view>
		<view class="wrap__main">
			<view class="main__title">{{ $t('openh.one') }}</view>
			<view class="main__item">
				<text class="item__title">{{ $t('openh.two') }}</text>
				<text class="item__star">*</text>
				<view class="item__right">
					<input type="text" v-model.trim="formData.type" :placeholder="$t('openh.placeOne')" class="right__input" maxlength="20"/>
				</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{ $t('openh.three') }}</text>
				<text class="item__star">*</text>
				<view class="item__right">
					<input type="text" v-model.trim="formData.nationality" :placeholder="$t('openh.placeTwo')" class="right__input" maxlength="20"/>
				</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{ $t('openh.four') }}</text>
				<text class="item__star">*</text>
				<view class="item__right">
					<input type="text" v-model.trim="formData.true_name" :placeholder="$t('openh.placeThree')" class="right__input" maxlength="20"/>
				</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{ $t('openh.five') }}</text>
				<!-- <text class="item__star">*</text> -->
				<view class="item__right">
					<picker mode="selector" :show-toolbar="false" :range="genderList" @change="genderChange">
						<input type="text" style="pointer-events: none;"  v-model.trim="formData.sex"  :placeholder="$t('openh.placeFour')" class="right__input"/>
					</picker>
				</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{ $t('openh.six') }}</text>
				<!-- <text class="item__star">*</text> -->
				<view class="item__right" @click="isShowDatePicker=true">
					<input type="text" style="pointer-events: none;"  v-model.trim="formData.date_birth"  :placeholder="$t('openh.placeFive')" class="right__input"/>
				</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{ $t('openh.seven') }}</text>
				<text class="item__star">*</text>
				<view class="item__right">
					<input type="text" v-model.trim="formData.id_card" :placeholder="$t('openh.placeSix')" class="right__input" maxlength="18"/>
				</view>
			</view>
			<view class="main__item">
			<!-- 	<text class="item__title">{{ $t('openh.eight') }}</text> -->
				<!-- <text class="item__star">*</text> -->
				<!-- <view class="item__right">
					<picker mode="selector" :range="merrList" :value="index1"  @change="merrChange">
						 <view class="uni-input">{{merrList[index1]}}</view> -->
					<!-- 	<input type="text" v-model.trim="formData.married"  :placeholder="$t('openh.placeSevev')" class="right__input"/>
					</picker> --> 
					<!-- <input type="text" v-model.trim="formData.married" :placeholder="$t('openh.placeSevev')" class="right__input" maxlength="12"/> -->
			<!-- 	</view> -->
			</view>
		</view>
		
		
		<view class="wrap__btn">
			<text  class="btn__text" @click="btnClick">{{ $t('openh.ninght') }}</text>
		</view>
		<u-datetime-picker
							mode="date"
							:confirm-type="'send'"
							:confirmText="this.$t('trade.sure')" 
							:cancelText="this.$t('trade.cancel1')"
							:show="isShowDatePicker"
							v-model="pickerDate"
							:minDate="minDate"
							@cancel="isShowDatePicker=false"
							@confirm="dateConfirm">
					</u-datetime-picker>
	</view>
</template>

<script>
	import {formatDate} from '@/common/js/utils.js'
	export default{
		data(){
			return {
				genderList:[this.$t("trade.male"), this.$t("trade.female")],
				merrList:[this.$t("trade.havemarr"), this.$t("trade.nomarr")],
				married:"",
				isShowDatePicker:false,
				pickerDate:"",
				minDate:"",
				formData:{
					true_name:"", //姓名
					id_card:"", //身份证
					id_card_img_1:"", //身份证1
					id_card_img_2:"", //身份证2
					type:"", //证件类型
					nationality:"", //国籍
					sex:"", //性别
					date_birth:"", // 出生日期
					married:"",
				}
			}
		},
		onLoad() {
			this.minDate = new Date("1940-01-01").getTime()
		},
		methods:{
			// 提交点击
			async btnClick(){
				let {formData} = this
				let hasEmpty = false
				
				
				for(let key in formData){
					console.log(key,formData[key])
					if(formData[key] == ""  && key!= 'married' 
					&& key!= 'date_birth' && key!= 'sex'  && key!= 'true_name'  ){
						hasEmpty = true
						break
					}
				}
				if(hasEmpty){
					uni.showToast({
						title:this.$t('fish.message'),
						icon:"none"
					})
					return
				}
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let res = await this.$api.subOpenInfo(formData)
				if(res.code === 1){
					uni.showToast({
						title:this.$t('success.success'),
						icon:"success",
						mask:true
					})
					setTimeout(()=>{
						uni.navigateBack()
					}, 1200)
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			// 上傳圖片
			imgClick(type){
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				
				this.formData[type] = '';
				
				
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success:  async(res)=> {
						let file = res.tempFilePaths[0]
						
						
						this.formData[type] = file
						
						
						
						let result = await this.$api.uploadImg(file)
						 let parseRes = result ? JSON.parse(result) : {}
						// console.log(parseRes)
						console.log(parseRes.code,1231232)
						if(parseRes.code ===1 && parseRes.data){
							uni.hideLoading()
							this.formData[type] = parseRes.data.fullurl || ""
						}else{
							uni.showToast({
								title:parseRes.msg,
								icon:"none"
							})
						}
					}
				});
			},
			blobToDataURI(blob, callback) {
						// blob 转 base64
						var reader = new FileReader();
						reader.readAsDataURL(blob);
						reader.onload = function(e) {
							callback(e.target.result);
						};
					},
			// 日期選擇
			dateChange(e){
				let {value} = e.detail
				this.formData.date_birth = value
			},
			// 日期确认
			dateConfirm(e){
				let date = formatDate(e.value, "Y-m-d")
				this.formData.date_birth = date
				this.isShowDatePicker = false
			},
			// 性別選擇
			genderChange(e){
				let {value} = e.detail
				this.formData.sex = this.genderList[value]
			},
			merrChange(e){
				let {value} = e.detail
				this.formData.married = this.merrList[value]
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		padding: 0 30rpx;
		box-sizing: border-box;
		&__header{
			@include flexRowAlign(space-between);
			.header__uplaod{
				.upload__img{
					width: 326rpx;
					height: 206rpx;
					border-radius: 10rpx;
				}
			}
		}
		&__main{
			margin-top: 50rpx;
			.main__title{
				@include flexRowAlign();
				font-size: 36rpx;
				font-weight: 800;
				color: #fff;
				margin-bottom: 30rpx;
				&:before{
					content: "";
					width: 6rpx;
					height: 30rpx;
					background: #458EF4;
					margin-right: 10rpx;
				}
			}
			.main__item{
				height: 98rpx;
				// border-top: 1rpx solid #CCCCCC;
				@include flexRowAlign();
				.item__title{
					font-size: 32rpx;
					color: #fff;
					width: 150rpx;
					text-align: justify;
					text-align-last: justify;
				}
				.item__star{
					font-size: 32rpx;
					color: #FF2B2B;
					margin-left: 6rpx;
				}
				.item__right{
					margin-left: 40rpx;
					flex: 1;
					@include flexRowAlign();
					.right__input{
						flex: 1;
						color: #fff;
						font-size: 30rpx;
					}
				}
			}
		}
		&__btn{
			@include flexRowAlign(center);
			margin-top: 60rpx;
			.btn__text{
				width: 600rpx;
				height: 98rpx;
				background: #458EF4;
				border-radius: 12rpx;
				@include flexCenter();
				font-size: 36rpx;
				font-weight: 800;
				color: #FFFFFF;
			}
		}
	}
</style>